import * as d3 from "d3";
import mouseObserver from '@/utils/MouseMoveObserver';

export default class D3Selection {

    svg = null;

    isSelecting = false;

    startX = 0;
    startY = 0;

    selectionBox = null;

    selectionLayer = null;

    components = null;

    constructor({svg, selectComponent, clearSelection, mouseObserver}) {
        this.svg = svg;
        this.selectionLayer = this.svg.append("g").attr("class", "selection-layer");
        this.selectComponent = selectComponent;
        this.clearSelection = clearSelection;
        mouseObserver.subscribe(this.mousemove);
        this.svg.on("mousedown", this.mousedown);
        this.svg.on("mouseup", this.mouseup);
        this.svg.on("mouseleave", this.mouseleave);
    }

    mousedown = (event) => {
       // 如果点击在组件上，不开始框选
       if (event.target.closest(".components") || event.target.closest(".rotate-handle")) {
            
            return;
        }

        // 点击空白处，取消所有选择
        this.clearSelection();

        // 开始框选
        this.isSelecting = true;
        const coords = d3.pointer(event);
        this.startX = coords[0];
        this.startY = coords[1];

        // 创建选择框
        this.selectionBox = this.selectionLayer.append("rect")
        .attr("class", "selection-box")
        .attr("x", this.startX)
        .attr("y", this.startY)
        .attr("width", 0)
        .attr("height", 0)
        .attr("stroke", "#3498db")
        .attr("stroke-width", 2)
        .attr("stroke-dasharray", "5,5")
        .attr("fill", "rgba(52, 152, 219, 0.1)")
    }

    // 鼠标移动事件 - 更新选择框
    mousemove = (event) => {
        if (!this.isSelecting || !this.selectionBox) return;
            
        const coords = d3.pointer(event);
        const currentX = coords[0];
        const currentY = coords[1];
        
        // 计算选择框的位置和大小（确保值为正）
        const x = Math.min(this.startX, currentX);
        const y = Math.min(this.startY, currentY);
        const width = Math.abs(currentX - this.startX);
        const height = Math.abs(currentY - this.startY);
        
        // 更新选择框
        this.selectionBox
            .attr("x", x)
            .attr("y", y)
            .attr("width", width)
            .attr("height", height);
    }

    // 鼠标释放事件 - 完成框选
    mouseup = (event) => {
        if (this.isSelecting && this.selectionBox) {
            this.isSelecting = false;
            
            // 获取选择框的边界
            const box = this.selectionBox.node().getBBox();

            const components = d3.selectAll('.components');
            
            
            // 检查每个组件是否在选择框内
            components.each(component => {
                // 组件中心坐标
                const cx = component?.selection?.attr('x');
                const cy = component?.selection?.attr('y');
                
                // 检查组件是否完全在选择框内
                if (cx >= box.x && 
                    cx <= box.x + box.width &&
                    cy >= box.y && 
                    cy <= box.y + box.height) {
                    this.selectComponent(component?.selection);
                }
            });
            
            // 移除选择框
            this.selectionBox.remove();
            this.selectionBox = null;
        }
    }

    // 鼠标离开画布时结束选择
    mouseleave = (event) => {
        if (this.isSelecting && this.selectionBox) {
            this.selectionBox.remove();
            this.selectionBox = null;
            this.isSelecting = false;
        }
    }
}